<template>
 <div class="tab-bar">
   <van-tabbar route>
      <van-tabbar-item
      v-for="tab in tabs"
      :key="tab.path"
      :to="tab.path"
      :badge="tab.meta.badge ? cartNum : ''"
      replace
      :icon="tab.meta.icon">{{tab.meta.title}}</van-tabbar-item>

      <!-- <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item> -->
   </van-tabbar>

 </div>
</template>

<script>
import routes from '../../router/routes'
export default {
 name: 'TabBar',
 data() {
      return {
         
      }
   },
   computed: {
      // 筛选出路由表中需要在 tabbar 上渲染的 tab 项路由信息
      tabs(){
         return routes.filter(route => route.meta?.inTabbar)
      },
      cartNum(){
         return this.$store.getters['shoppingCart/totalAmount']
      }
   }
}
</script>

<style scoped>
.tab-bar{
   height: 50px;
}
</style>
